<div class="da-list-wrap">
  <div class="da-content-banner">
    <d-breadcrumb>
      <d-breadcrumb-item><a routerLink="/">{{ 'system.breadcrumb.home' | translate }}</a></d-breadcrumb-item>
      <d-breadcrumb-item>{{ 'system.breadcrumb.Dirctory' | translate }}</d-breadcrumb-item>
    </d-breadcrumb>
  </div>

  <div class="da-content-wrapper">
    <div class="dictionary-type-box">
      <div class="card">
        <div class="card-title">
          <span>字典类别</span>
        </div>
        <div class="fitter mt-3">
          <input dTextInput placeholder="请输入" name="searchDepartmentValue" (input)="searchDepartment($event)" />
        </div>
        <div class="card-body mt-3">
          <d-tree #basicTree [tree]="displayTreeData" [treeNodeIdKey]="'id'" [treeNodeTitleKey]="'name'"
            [treeNodeChildrenKey]="'subCategories'" (nodeSelected)="nodeSelected($event)"
            (afterTreeInit)="afterTreeInit($event)">
          </d-tree>
        </div>
        <div class="card-footer">
          <d-button bsStyle="common" bsSize="sm" (btnClick)="addDirctoyType()">新增</d-button>
          <d-button bsStyle="common" bsSize="sm" (btnClick)="EditDirctoyType()">编辑</d-button>
          <d-button style="margin-right: 0px;" bsStyle="danger" bsSize="sm"
            (btnClick)="DeleteDirctoyType()">删除</d-button>
        </div>
      </div>
    </div>
    <div class="dictionary-box">
      <div class="card">
        <div class="card-header">
          <d-button bsStyle="primary" (btnClick)="addDirctoy()"> <i class="icon icon-add me-2"></i>新增</d-button>
          <d-button bsStyle="danger" (btnClick)="deleteDirctoy()"><i class="icon icon-delete me-2"></i>删除</d-button>
        </div>
        <div class="card-body">
          <d-data-table [dataSource]="this.dirctorData" [lazy]="true" [scrollable]="true" [fixHeader]="true"
            [tableOverflowType]="'auto'" [scrollable]="true" [resizeable]="true" [tableWidthConfig]="tableWidthConfig"
            (checkAllChange)="getCheckedRows()" (rowCheckChange)="getCheckedRows()">
            <thead dTableHead [checkable]="true">
              <tr dTableRow>
                <th dHeadCell *ngFor="let colOption of dataTableOptions.columns">{{ colOption.header }}</th>
              </tr>
            </thead>
            <tbody dTableBody>
              <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex" let-nestedIndex="nestedIndex">
                <tr dTableRow>
                  <td dTableCell>
                    <d-checkbox [disabled]="false" [showAnimation]="true" [ngModelOptions]="{ standalone: true }"
                      [ngModel]="rowItem.$checked" dTooltip [halfchecked]="rowItem.$halfChecked" [showGlowStyle]="false"
                      (ngModelChange)="onRowCheckChange($event, rowIndex, nestedIndex, rowItem)"></d-checkbox>
                  </td>
                  <td dTableCell [rowItem]="rowItem">
                    <span><a class="devui-link" (click)="editDirctoy(rowItem)">{{rowItem?.entryName}}</a></span>
                  </td>
                  <td dTableCell [rowItem]="rowItem">
                    <span dTooltip [content]="rowItem?.entryValue">{{rowItem?.entryValue}}</span>
                  </td>
                  <td dTableCell [rowItem]="rowItem">
                    <span dTooltip [content]="rowItem?.description">{{rowItem?.description}}</span>
                  </td>
                </tr>
              </ng-template>
            </tbody>
          </d-data-table>
        </div>
        <div class="page-footer">
          <div class="text">
            <p>已选 <span class="underline">{{checkedIds.length}}</span> 条
              <a (click)="cleared()" class="clear">清空</a>
            </p>
          </div>
          <d-pagination [size]="'sm'" [canViewTotal]="true" [canChangePageSize]="true" [canJumpPage]="true"
            [maxItems]="5" [total]="this.pager.total" [pageSizeOptions]="this.pageSizeOptions"
            [(pageSize)]="pager.pageSize" [(pageIndex)]="pager.pageIndex" (pageIndexChange)="pageIndexChange($event)"
            (pageSizeChange)="pageSizeChange($event)">
          </d-pagination>
        </div>
      </div>
    </div>
  </div>
  <d-toast [value]="msgs" [life]="2000" [styleClass]="'custom-class'" [style]="{ left: '50%',top:'10px' }"></d-toast>
</div>
